iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 16
1
Modern Web

Vue.JS且戰且飛系列 第 26

Vue.JS且戰且飛(二十六)

  • 分享至 

  • xImage
  •  

多for..in

jsfiddle


26.php

<html>
<head>
    <meta charset="UTF-8">
    <title>多for..in</title>
</head>
<body>
<div id="show">
    <ul v-for="item in list">
        {{ item.name }}
        <li v-for="row in item.row">
            {{ row.name }}
            <ol v-for="r in row.r">
                {{ r.name }}
            </ol>
        </li>
    </ul>
</div>
</body>
<script src="vue.js"></script>
<script>

    new Vue({
        el: '#show',
        data: {
            list: [
                {
                    name: 'eagle', row: [
                    {
                        name: '專長', r: [
                        {name: 'PHP'},
                        {name: 'SQL'},
                        {name: 'Laravel'},
                        {name: 'CI'},
                        {name: 'JQuery'},
                        {name: 'Vue.js'}
                    ]
                    }
                ]
                },
                {
                    name: 'SAM', row: [
                    {
                        name: '專長', r: [
                        {name: '調戲狗'},
                        {name: '調戲貓'}
                    ]
                    }
                ]
                }
            ]
        }
    })
</script>
</html>

上一篇
Vue.JS且戰且飛(二十五)
下一篇
Vue.JS且戰且飛(二十七)
系列文
Vue.JS且戰且飛30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言